<template>

  <div class="purchasingplan flex flex-col">
    <!-- 查询区 -->
    <searchCard @onSearch="searchFn" @onReset="resetFn">
      <el-form :model="purchasingPlanFrom" label-width="auto" inline @keyup.enter="searchFn">
        <el-form-item label="供应商名称：">
          <pb-input v-model="purchasingPlanFrom.supplierName" placeholder="请输入供应商名称"></pb-input>
        </el-form-item>
        <el-form-item label="供应商编号：">
          <pb-input v-model="purchasingPlanFrom.supplierCode" placeholder="请输入供应商编号"></pb-input>
        </el-form-item>
        <el-form-item label="联系人：">
          <pb-input v-model="purchasingPlanFrom.contact" placeholder="请输入联系人"></pb-input>
        </el-form-item>
      </el-form>
    </searchCard>

    <!-- 表格区 -->
    <div class="flex-1">
      <pb-card padding="0" height="100%">
        <div class="content-box">
          <ContentOperation>
            <pb-button v-hasPerm="'center:purchasingplan:add'" size="small" plain class="mr-6"
              @click="offAddpurchaasingFn">
              +添加
            </pb-button>
          </ContentOperation>
          <div class=" main-box ">
            <pb-table :column="planColumn" :tableData="purchasingPlanData" :bottomElement="['pb-page']">
              <template #supplyTenantName="{ row }">
                <div class=" flex justify-center ">
                  <el-popover placement="bottom" :width="200" trigger="hover" :content="row.supplyTenantName">
                    <template #reference>
                      <div class="popContent pb-ellipsis">{{ row.supplyTenantName }}</div>
                    </template>
                  </el-popover>
                </div>
              </template>
              <template #remark="{ row }">
                <div>
                  <el-popover placement="bottom" :width="200" trigger="hover" :content="row.remark">
                    <template #reference>{{ row.remark }}
                    </template>
                  </el-popover>
                </div>
              </template>
              <template #operate="{ row }">
                <div class="flex">
                  <div v-hasPerm="'center:purchasingplan:edit'" class="flex">
                    <pb-button text size="small" @click="offAddpurchaasingFn(row)"
                      v-if="!row.isSystemData">编辑</pb-button>
                    <p class="divider mr-2 ml-2"></p>
                  </div>
                  <div v-hasPerm="'center:purchasingplan:delete'">
                    <PopconfirmButton @confirm="deleteFn(row)"></PopconfirmButton>
                  </div>
                </div>
              </template>
            </pb-table>
            <pb-pagination v-model:currentPage="pages.currentPage" v-model:pageSize="pages.pageSize"
              @onChange="onPagesChange" :total="pages.total"></pb-pagination>
          </div>
        </div>

      </pb-card>
    </div>

    <Addpurchaasing ref="addpurchaseing" @getPurchasListfn="getPurchasListfn"></Addpurchaasing>
  </div>
</template>

<script setup lang="ts">
import Addpurchaasing from './addPurchaasing/index.vue'
import { GetPurchaseListApi, DeteteSupplierApi } from '@/api/Purchasing'
const clearObjKey = (clearForm: any) => {
  Object.keys(clearForm).forEach((key: any) => {
    if (Array.isArray(clearForm[key])) {
      // 如果属性是数组，则清空数组
      clearForm[key].length = 0;
    } else {
      // 如果属性不是数组，则设置为默认值（默认为空字符串）
      clearForm[key] = '';
    }
  });
}
const planColumn = reactive([
  {
    key: "supplierCode",
    name: "供应商编码",
    align: "right",
  },
  {
    key: "supplierName",
    name: "供应商名称",
  },
  {
    slot: "supplyTenantName",
    name: "供应单位",
  },
  {
    key: 'contact',
    name: "联系人",
  }, {
    key: 'phone',
    name: "电话",
  }, {
    key: 'address',
    name: "地址",
  }, {
    slot: 'remark',
    name: "备注",
  },
  {
    slot: "operate",
    name: "操作",
    fixed: 'right',
  },
])
const addpurchaseing = ref(null) as any
const purchasingPlanData = ref([])
const offAddpurchaasingFn = (row: any) => {
  addpurchaseing.value.showFn(row ? JSON.parse(JSON.stringify(row)) : '')
}

const purchasingPlanFrom = reactive({
  supplierName: "",
  supplierCode: "",
  contact: ""
})
const pageInit = () => ({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const pages = ref(pageInit());
const onPagesChange = () => {
  getPurchasListfn()
}

const searchFn = () => {
  getPurchasListfn()
}
const resetFn = () => {
  clearObjKey(purchasingPlanFrom)
  getPurchasListfn()
}
const getPurchasListfn = () => {
  GetPurchaseListApi({
    "currentPage": pages.value.currentPage,
    "pageSize": pages.value.pageSize,
    "sortingFields": [
      {
        "field": "",
        "order": ""
      }
    ],
    "supplierName": purchasingPlanFrom.supplierName,
    "supplierCode": purchasingPlanFrom.supplierCode,
    "contact": purchasingPlanFrom.contact
  }).then(res => {
    purchasingPlanData.value = res.data.records
    pages.value.total = res.data.total
  })
}
const deleteFn = (row: any) => {
  DeteteSupplierApi({
    "supplierId": row.supplierId
  }).then(res => {
    getPurchasListfn()
  })
}
onMounted(() => {
  getPurchasListfn()
})
</script>

<style lang="scss" scoped>
.content-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.main-box {
  padding: 16px;
  box-sizing: border-box;
}

.popContent {
  width: 100%;
  overflow: hidden;
}
</style>